<template>
	<view class="page">
		<fu-custom :isBack="true" bgColor="bg-white">
			<view slot="content">{{pageType=='goods'?'商品评价':'订单评价'}}</view>
		</fu-custom>
		<fu-loading v-if="isShowLoading"></fu-loading>
		<block v-else>
			<view class="tab-bar padding-tb-sm"  v-if="pageType=='goods'">
				<view class=" flex align-center padding-lr" v-if="lists[0]&&lists[0].goods_info">
					<view class=" relative margin-right-sm flex-shrink fu-block-200 radius-16 overHidden">
						<fu-image :src="lists[0].goods_info.goods_thumb" mode="aspectFill"></fu-image>
					</view>
					<view class="height-200 flex  justify-between flex-direction w80">
						<view>
							<view class="text-df text-cut-2">{{ lists[0].goods_info.goods_name }} </view>
							<view class="text-sm text-999 margin-top-sm sku_name">
								<view class=" ">
									<text>商品货号：{{ lists[0].goods_info.goods_sn }}</text>
								</view>
							</view>
						</view>
						<view class="desc-number flex justify-between align-center">
							<view class="text-lg text-prices flex-shrink">
								<text class="text-price"></text>
								<text>{{ lists[0].goods_info.shop_price }}</text>
							</view>
							<view class="text-sm text-999 text-cut"> 销量{{lists[0].goods_info.sales_sum||0}} </view>
							<view class="text-sm text-999 text-cut"> 库存{{lists[0].goods_info.stock||0}} </view>
						</view>
					</view>
				</view>
			</view>
			<view v-for="(item,index) in lists" :key='index' :style="{ top: CustomBar + 'px' }">
				<view class="tab-bar padding-tb-sm"  v-if="pageType=='order'">
					<view class=" flex align-center padding-lr" v-if="item.goods_info">
						<view class=" relative margin-right-sm flex-shrink fu-block-200 radius-16 overHidden">
							<fu-image :src="item.goods_info.goods_thumb" mode="aspectFill"></fu-image>
						</view>
						<view class="height-200 flex  justify-between flex-direction w80">
							<view>
								<view class="text-df text-cut-2">{{ item.goods_info.goods_name }} </view>
								<view class="text-sm text-999 margin-top-sm sku_name">
									<view class=" ">
										<text>商品货号：{{ item.goods_info.goods_sn }}</text>
									</view>
								</view>
							</view>
							<view class="desc-number flex justify-between align-center">
								<view class="text-lg text-prices flex-shrink">
									<text class="text-price"></text>
									<text>{{ item.goods_info.shop_price }}</text>
								</view>
								<view class="text-sm text-999 text-cut"> 销量{{item.goods_info.sales_sum||0}} </view>
								<view class="text-sm text-999 text-cut"> 库存{{item.goods_info.stock||0}} </view>
							</view>
						</view>
					</view>
				</view>
				<view class="border-bottom"></view>
				<view class="bg-white padding-lr">
					<view class="text-bold text-lg text-333 padding-tb"> 用户评价 <text v-if="pageType=='goods'">（{{lists.length}}）</text> </view>
					<fu-evaluate :prop="item" @report='report'></fu-evaluate>
				</view>
			</view>
			<fu-empty-ui v-if="lists.length == 0 && isInit"></fu-empty-ui>
			<!-- 空布局  end-->
			<!-- 底部加载描述语 start -->
			<uni-load-more v-if="lists.length >= 5" :status="status"></uni-load-more>
			<!-- 底部加载描述语 end -->
		</block>
		<!-- 网络检测 start -->
		<fu-notwork></fu-notwork>
		<!-- 网络检测 end -->
	</view>
</template>

<script>
	import fuEvaluate from '../../components/fu-evaluate/fu-evaluate.vue';
	export default {
		components: {
			fuEvaluate
		},
		data() {
			return {
				filterTypeList: [{
						name: global.i18n['全部'],
						filter_type: ''
					},
					{
						name: global.i18n['有文字'],
						filter_type: 'content'
					},
					{
						name: global.i18n['有图'],
						filter_type: 'thumb'
					},
					{
						name: global.i18n['有视频'],
						filter_type: 'video'
					}
				], //分类查询
				tabs: [], //导航分类
				goodsInfo: '', //
				type_name: 'all', //导航分类 选中
				filter_type: '', //分类查询 选中
				currentTab: 0, //选中的序号
				isShowLoading: false, //页面加载 loading
				lists: [], //评论列表
				page: 1, //页码数
				list_rows: 10, // 一页几条
				status: 'more', //底部 加载状态
				isInit: false, // 页面是否初始化
				goods_id: 0 ,//商品id
				pageType:'',//'goods',商品查看 order 订单查看
			};
		},
		/**
		 * @param {Object} options  goods_id:商品id
		 */
		onLoad(options) {
			const {
				order_sn,goods_id,pageType
			} = options;
			this.order_sn = order_sn;
			this.goods_id = goods_id;
			this.pageType = pageType;
			this.loadData();
		},
		/**
		 * @description  下拉加载
		 */
		onPullDownRefresh() {
			this.page = 1;
			this.status = 'more';
			this.loadData(true);
		},

		/**
		 * @description  触底加载
		 */
		onReachBottom() {
			this.loadData();
		},
		methods: {
			report() {
				this.page = 1;
				this.status = 'more';
				this.loadData();
			},
			/**
			 * @event 点击评论去往评论详情
			 */
			goDetail(item) {
				console.log('xxxxx');
				this.$urouter.navigateTo({
					url: '/pages/goods/goodsdetail/comment-detail/index',
					params: item
				});
			},
			/**
			 * @description  过滤条件切换
			 * @param {Object} item   filter_type：过滤条件的描述语
			 */
			filterTypeChoice(item) {
				this.filter_type = item.filter_type;
				this.page = 1;
				this.status = 'more';
				this.loadData(true);
			},
			/**
			 * @description  导航描述语
			 * @param {Object} index 导航序号
			 * @param {Object} val  导航描述语
			 */
			switchTab(index, val) {
				console.log(index, val);
				this.type_name = val;
				this.currentTab = index;
				this.page = 1;
				this.status = 'more';
				this.loadData(true);
			},
			/**
			 * @description 获取数据列表
			 * @param {Object} value  是否显示页面loading 显示
			 */
			loadData(value) {
				if (this.status != 'more') return;
				this.status = 'loading';
				if (this.page == 1 && value) {
					this.isShowLoading = true;
				}
				let url='',
				data={};
				if(this.pageType=='goods'){
					url='/v1/6471735ecf468'
					data={
						goods_id: this.goods_id
					}
				}else{
					url='/v1/63e20927a2fd0'
					data={
						order_sn: this.order_sn
					}
				}
				this.$api
					.post(url,data)
					.then(res => {
						this.isShowLoading = false;
						this.isInit = true;
						if (res.data.code == 1) {
							let list = res.data.data.data;
							let total = res.data.data.total;
							if (this.page == 1) this.lists = [];
							this.lists = this.lists.concat(list);
							if (this.lists.length >= total) {
								this.status = 'noMore';
							} else {
								this.status = 'more';
								this.page++;
							}
							this.$nextTick(() => {
								uni.stopPullDownRefresh();
							});
						}
					})
					.catch(err => {
						this.isShowLoading = false;
						this.isInit = true;
						this.status = 'more';
						console.log(err);
					});
			}
		}
	};
</script>

<style lang="scss" scoped>
	.page {
		min-height: 100vh;
		background-color: #ffffff;
	}

	// 顶部导航 start
	.tab-bar {
		position: sticky;
		z-index: 999;
		background-color: #FFFFFF;
	}

	// 顶部导航 start
	.navbar {
		display: flex;
		width: 100%;
		height: 88rpx;
		line-height: 88rpx;
		background: #ffffff;
		box-shadow: 0 1px 5px rgba(0, 0, 0, 0.06);

		.tab-item {
			border-bottom: 4rpx solid #ffffff;
			font-size: 28rpx;
			color: #999999;
		}

		.tab-item.active {
			font-size: 32rpx;
			color: #333333;
			border-color: $theme;
			font-weight: bold;
		}
	}

	// 顶部导航 end
	// 分类搜索导航 start
	.list-item {
		background-color: #f8f8f8;
		display: inline-block;
		margin-bottom: 20rpx;
	}

	.ml-20 {
		margin-left: 20rpx;
	}

	.filter_type {
		padding: 20rpx;
		position: sticky;
		background: #ffffff;
		width: 100%;
		z-index: 999;
	}

	// 分类搜索导航 end
	// 选中的分类 start
	.active2 {
		/* box-shadow: inset 0 0 1rpx 1rpx $theme; */
		border: 1px solid #FF6464;
		background-color: rgba(240, 35, 37, 0.1) !important;
		color: $theme;
	}

	// 选中的分类 end
	.border-bottom {
		width: 100%;
		height: 20rpx;
		background: #F8F8F8;
	}

	.box-kong {
		position: absolute;
		border-radius: 16rpx 0 16rpx 0;
		left: 0;
		top: 0;
		z-index: 99;
		background: rgba(0, 0, 0, 0.6);
	}
</style>